<template>
    <view class="alarm" ref="alarm" :style="alarmStyle">
        <view class="house">
            <image class="img" src="/static/house.png" alt="">
            <view>{{name}}</view>
        </view>
        <view class="warn" ref="warn" :style="warnStyle">
            <view class="box" v-if="alarmVideoNum">
                <image src="/static/warn-bg.png" class="bg">
                <image class="img" src="/static/warn1.png">
            </view>
            <view class="box" v-if="alarmNum">
                <image src="/static/warn-bg.png" class="bg">
                <image class="img" src="/static/warn2.png">
            </view>
        </view>
        <view class="place">
            <image class="img" src="/static/place.png" alt="">
        </view>
    </view>
</template>

<script>
    export default {
        data () {
            return {
				warnStyle:{},
				alarmStyle:{}
            }
        },
        props:{
            warnShow:Number,
			name:String,
			alarmVideoNum:Number,
			alarmNum:Number,
        },
        mounted () {
          this.loca()
        },
        methods: {
            loca(){
                // let dom=this.$refs.warn
                // let bigdom=this.$refs.alarm
                if(this.warnShow===1){
					this.warnStyle={
						left:'220px'
					}
					this.alarmStyle={
						top:'-30px',
						right:'-20px'
					}
                }else if(this.warnShow===2){
					this.warnStyle={
						left:'220px'
					}
					this.alarmStyle={
						top:'-50px',
						right:'30px'
					}
                }else if(this.warnShow===3){
					this.warnStyle={
						right:'220px'
					}
					this.alarmStyle={
						top:'-50px',
						left:'70px'
					}
                }
            }
        }  
    }
</script>

<style lang="scss" scoped>
.alarm{
    position:absolute;
    display: flex;
    align-items: center;
	color: #fff;
    .house{
        width: 206px;
        height: 130px;
        background: url("../../static/alarm-bg.png") no-repeat;
        background-position: 50% 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        .img{
            width: 45px;
            height: 45px;
            margin-right: 10px;
        }
    }
    .warn{
        position: absolute;
        display: flex;
        .box{
            position: relative;
            margin-right: 20px;
            .bg{
				width: 60px;
				height: 60px;
                animation: rotate 5s linear infinite;
            }
            .img{
				width: 30px;
				height: 24px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            @keyframes rotate {
                from{
                    transform: rotate(0);
                }
                to{
                    transform: rotate(360deg);
                }
            }
        }
    }
    .place{
        position: absolute;
        bottom: -26px;
        left: 88px;
		.img{
			width: 32px;
			height: 40px;
		}
    }
}
</style>